<template>
  <div class="drag-demo">
    <div class="header">
      <h1>🎯 Vue拖拽组件演示</h1>
      <p>在固定范围内自由拖拽元素，支持鼠标和触摸操作</p>
    </div>

    <div class="demo-section">
      <h2 class="demo-title">拖拽演示区域</h2>
      
      <div class="controls">
        <button 
          class="btn btn-primary" 
          @click="setPosition('center')"
        >
          居中显示
        </button>
        <button 
          class="btn btn-success" 
          @click="setPosition('random')"
        >
          随机位置
        </button>
        <button 
          class="btn btn-warning" 
          @click="setPosition('custom')"
        >
          自定义位置
        </button>
        <button 
          class="btn btn-primary" 
          @click="resetPosition()"
        >
          重置位置
        </button>
        <button 
          class="btn btn-info" 
          @click="toggleEnabled()"
        >
          {{ enabled ? '禁用拖拽' : '启用拖拽' }}
        </button>
      </div>
      
      <div class="demo-area">
        <Draggable
          ref="draggableItem"
          :enabled="enabled"
          :initial-position="initialPosition"
          :constrain-to-parent="true"
          custom-class="demo-item"
          @drag-start="onDragStart"
          @drag-move="onDragMove"
          @drag-end="onDragEnd"
        >
          <div class="item-content">
            <div class="item-icon">🎯</div>
            <div class="item-text">拖拽元素</div>
          </div>
        </Draggable>
      </div>
      
      <div class="info-panel">
        <h3>位置信息</h3>
        <div class="info-item">
          <span class="info-label">当前位置:</span>
          <span class="info-value">{{ positionInfo }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">边界范围:</span>
          <span class="info-value">{{ boundaryInfo }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">拖拽状态:</span>
          <span class="info-value">{{ dragStatus }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">启用状态:</span>
          <span class="info-value">{{ enabled ? '已启用' : '已禁用' }}</span>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import Draggable from '../components/Draggable.vue'

export default {
  name: 'DragDemo',
  components: {
    Draggable
  },
  data() {
    return {
      enabled: true,
      initialPosition: 'center',
      currentPosition: { x: 0, y: 0 },
      boundary: { right: 0, bottom: 0 },
      dragStatus: '未开始'
    }
  },
  computed: {
    positionInfo() {
      return `(${Math.round(this.currentPosition.x)}, ${Math.round(this.currentPosition.y)})`
    },
    boundaryInfo() {
      if (!this.boundary) return '(0,0) - (0,0)'
      return `(0,0) - (${Math.round(this.boundary.right || 0)}, ${Math.round(this.boundary.bottom || 0)})`
    }
  },
  methods: {
    setPosition(type, customX = 300, customY = 50) {
      if (!this.$refs.draggableItem) return
      
      // 直接调用Draggable组件的增强setPosition方法
      switch(type) {
        case 'center':
          this.$refs.draggableItem.setPosition(0, 0, 'center')
          break
        case 'random':
          this.$refs.draggableItem.setPosition(0, 0, 'random')
          break
        case 'custom':
          // 自定义位置：使用传入的固定值，默认为(300, 50)
          this.$refs.draggableItem.setPosition(customX, customY, 'custom')
          break
        default:
          this.$refs.draggableItem.setPosition(0, 0)
      }
      
      // 延迟更新位置信息
      setTimeout(() => {
        this.updatePositionInfo()
      }, 50)
    },
    
    resetPosition() {
      this.$refs.draggableItem.setPosition(0, 0)
      setTimeout(() => {
        this.updatePositionInfo()
      }, 50)
    },
    
    toggleEnabled() {
      this.enabled = !this.enabled
    },
    
    onDragStart(data) {
      console.log('开始拖拽', data)
      this.dragStatus = '拖拽中'
      this.updatePositionInfo()
    },
    
    onDragMove(data) {
      this.currentPosition = { x: data.x, y: data.y }
      this.dragStatus = '拖拽中'
    },
    
    onDragEnd(data) {
      console.log('拖拽结束', data)
      this.currentPosition = { x: data.x, y: data.y }
      this.dragStatus = '已结束'
      this.updatePositionInfo()
    },
    
    updatePositionInfo() {
      if (this.$refs.draggableItem) {
        this.currentPosition = this.$refs.draggableItem.getPosition()
        this.boundary = this.$refs.draggableItem.getBoundary()
      }
    }
  },
  mounted() {
    this.updatePositionInfo()
    
    // 监听窗口大小变化，重新计算边界
    this.handleResize = () => {
      if (this.$refs.draggableItem) {
        this.$refs.draggableItem.recalculateBounds()
        this.updatePositionInfo()
      }
    }
    
    window.addEventListener('resize', this.handleResize)
  },
  
  beforeUnmount() {
    if (this.handleResize) {
      window.removeEventListener('resize', this.handleResize)
    }
  }
}
</script>

<style scoped>
.drag-demo {
  font-family: 'Microsoft YaHei', Arial, sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  padding: 20px;
}

.header {
  text-align: center;
  color: white;
  margin-bottom: 30px;
}

.header h1 {
  font-size: 2.5em;
  margin-bottom: 10px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.header p {
  font-size: 1.2em;
  opacity: 0.9;
}

.demo-section {
  background: white;
  border-radius: 15px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.demo-title {
  font-size: 1.5em;
  color: #333;
  margin-bottom: 20px;
  border-bottom: 2px solid #667eea;
  padding-bottom: 10px;
}

.controls {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.btn-primary {
  background: linear-gradient(45deg, #667eea, #764ba2);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.btn-success {
  background: linear-gradient(45deg, #4ecdc4, #44a08d);
  color: white;
}

.btn-success:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(78, 205, 196, 0.4);
}

.btn-warning {
  background: linear-gradient(45deg, #f093fb, #f5576c);
  color: white;
}

.btn-warning:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(240, 147, 251, 0.4);
}

.btn-info {
  background: linear-gradient(45deg, #4facfe, #00f2fe);
  color: white;
}

.btn-info:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(79, 172, 254, 0.4);
}

.demo-area {
  position: relative;
  height: 500px;
  border: 3px dashed #ddd;
  border-radius: 10px;
  background: #f8f9fa;
  margin-bottom: 20px;
  overflow: hidden;
}

.info-panel {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 20px;
  margin-top: 20px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.info-label {
  font-weight: bold;
  color: #555;
}

.info-value {
  color: #333;
  font-family: 'Courier New', monospace;
}

.item-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-align: center;
}

.item-icon {
  font-size: 24px;
  margin-bottom: 5px;
}

.item-text {
  font-size: 12px;
  font-weight: bold;
  color: white;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.demo-item {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  background: linear-gradient(45deg, #ff6b6b, #ee5a24);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: white;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  transition: transform 0.2s ease;
}

.demo-item:hover {
  transform: scale(1.05);
}

/* 响应式 */
@media (max-width: 768px) {
  .header h1 {
    font-size: 2em;
  }
  
  .demo-area {
    height: 300px;
  }
  
  .demo-item {
    width: 60px;
    height: 60px;
    font-size: 12px;
  }
}
</style>
